import axios from "axios";
import { useState } from "react";
import qs from "qs";

import React, { RefObject } from "react";
import { useNavigate } from "react-router-dom";
import apimg from "../assets/4.png";
import sapimg from "../assets/4.png";
import imgs from "../assets/锁定.png";
import {
  Form,
  Input,
  Button,
  Dialog,
  Toast,
  TextArea,
  DatePicker,
  Selector,
  Slider,
  Stepper,
  Switch,
  Radio,
  Space,
} from "antd-mobile";
// 单选框性别
// import dayjs from 'dayjs'
import stylee from "../views/auto.module.css";
// 页面接参
import { useLocation } from "react-router-dom";

import { indexs, upload } from "../api/index";
import { Uploader } from "react-vant";
const defaultValue = [];
export default function About(props) {
  let { state } = useLocation();
  let navigate = useNavigate();
  let tel = /^1[23456789]\d{9}$/;
  // 姓名
  const [names, setname] = useState("");
  const name = (event) => {
    setname(event.target.value);
  };
  // 账号声明值全局
  const [accounts, setInp] = useState("");
  const accountevent = (event) => {
    setInp(event.target.value);
  };
  // 密码声明
  const [pass, setpass] = useState("");
  function passwords(event) {
    setpass(event.target.value);
  }
  // 声明性别
  const [radi, setradio] = useState("");
  function radioclick(event) {
    setradio(event);
  }

  let ty;

  let forms;
  function fileimg(filefile) {
    forms = new FormData();
    console.log(filefile[0]);
    forms.append("file", filefile[0].file);
    upload(forms).then((res) => {
      console.log(res);
      if (res.code == 1) {
        ty = `https://c2c.kuxia.top${res.url}`;
        console.log(ty);
        Toast.show({
          content: "上传成功",
        //   duration: 2000,
        });
      }
    });
  }

  // 点击注册
  function register() {
    console.log(names);
    console.log(accounts);
    console.log(pass);
    console.log(radi);
    console.log(ty);
    if (accounts != "" && pass != "" && radi != "" && ty != "" && names != "") {
      if (tel.test(accounts) == true) {
        indexs({
          tel: accounts,
          pass: pass,
          name: names,
          avatar: ty,
          gender: radi,
        }).then((res) => {
          console.log(res);
          if (res.code==1) {
            Toast.show({
              content: "注册成功",
            });
            setTimeout(() => {
              go();
            }, 2000);
          }else{
            Toast.show({
              content: "注册失败",
            });
          }
   
        });
      } else {
        Toast.show({
          content: "请输入正确的手机号",
        });
      }
    } else {
      Toast.show({
        content: "请填写完整",
      });
    }
  }
  // 已有账号跳转登录
  function go() {
    navigate("/", {});
  }
  return (
    <div className={stylee.sbody}>
      <div className={stylee.hell}>
        <h2>Hello!</h2>
        <p>京讯商场欢迎您</p>
      </div>
      <div className={stylee.registrebox}>
        {/* 注册账号 */}
        <div className={stylee.boxaccou}>
          <div className={stylee.boxaccount}>
            <div className={stylee.rowbox}>
              <img className={stylee.imgs} src={apimg} alt="" />
              <div>姓名</div>
            </div>
            <input
              onChange={name}
              className={stylee.accountcss}
              placeholder="请输入姓名"
            />
            <div className={stylee.rowbox}>
              <img className={stylee.imgs} src={apimg} alt="" />
              <div>手机号</div>
            </div>
            <input
              onChange={accountevent}
              className={stylee.accountcss}
              placeholder="请输入手机号/用户名/邮箱"
            />
            <div className={stylee.rowbox}>
              <img className={stylee.imgsp} src={sapimg} alt="" />
              <div>密码</div>
            </div>
            <input
              onChange={passwords}
              className={stylee.accountcss}
              placeholder="请输入密码"
            />
          </div>
        </div>
        <div className={stylee.sex}>
          性别：
          <Radio.Group onChange={radioclick}>
            <Space direction="lengthways">
              &nbsp;
              <Radio
                value="0"
                style={{
                  "--icon-size": "18px",
                  "--font-size": "14px",
                  "--gap": "6px",
                }}
              >
                男
              </Radio>
              &nbsp; &nbsp;&nbsp;
              <Radio
                value="1"
                style={{
                  "--icon-size": "18px",
                  "--font-size": "14px",
                  "--gap": "6px",
                }}
              >
                {" "}
                女
              </Radio>
              &nbsp; &nbsp;&nbsp;
              <Radio
                value="2"
                style={{
                  "--icon-size": "18px",
                  "--font-size": "14px",
                  "--gap": "6px",
                }}
              >
                {" "}
                保密
              </Radio>
            </Space>
          </Radio.Group>
        </div>
        <div
          className={stylee.att}
          style={{
            position: "absolute",
            marginTop: "73px",
            borderRadius: "30px",
            marginLeft: "12px",
          }}
        >
          <div>上传头像：</div>
          <Uploader
            accept="*"
            onChange={(file) => {
              fileimg(file);
            }}
            maxCount={1}
          />
        </div>
        <div onClick={register} className={stylee.gobut}>
          注册
        </div>
        <div className={stylee.login_register} onClick={go}>
          已有账号,去登录
        </div>
      </div>
    </div>
  );
}
